<template>
  <div id="app">
    <h2>{{$store.state.anime}}</h2>
    <button @click="changeinfo">修改信息</button>
    <button @click="delaychange">1s后修改</button>



    <h2>{{$store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="plus5(5)">+5</button>
    <button @click="addstu">addstu</button>

    <h2>大于20的学生</h2>
    <h1>{{$store.getters.more20stu}}</h1>
    <h1>{{$store.getters.more20stulen}}</h1>
    <h1>{{$store.getters.moreAgestu(1)}}</h1>
    <vuex1></vuex1>>
  </div>
</template>





<script>
import {INCREMENT} from "./store/mutations-types";
import vuex1 from "./components/vuex1";
export default {
  name: 'App',
  components:{
    vuex1
  },
  methods:{
    add(){
      this.$store.commit(INCREMENT)
    },
    sub(){
      this.$store.commit('decrement')
    },
    plus5(count){
      // //普通提交风格
      // this.$store.commit('incrementN',count)

      //特殊的提交风格
      this.$store.commit({
        type:'incrementN',
        //此时的count传的是对象
        count
      })
    },
    addstu(){

      const stu= {id:115,name:'ai',age:33}
      this.$store.commit('addstu',stu)
    },
    changeinfo(){
      this.$store.commit('changeinfo')
    },
    delaychange(){
      this.$store.dispatch("aUpdateInfo","信息")
      .then(res=>{
        console.log(res);
      })
    }

  }
}
</script>

<style>

</style>
